<!-- 表格 -->
<template>
<div>
  <el-table
    ref="plTable"
    :data="nowData"
    max-height='600px'
    header-drag-style
    :border="false"
    showBodyOverflow="title"
    showHeaderOverflow="title"
    :row-height="rowHeight"
    row-class-name='monitorTable'
    header-row-class-name = 'monitorTableHeader'
  >
   <template v-for="item in tableHeaders">
      <el-table-column
        v-if="item.prop!== 'customerNumber'"
        :key="item.id"
        :resizable="true"
        :show-overflow-tooltip="true"
        :prop="item.prop"
        :label="item.label"
        :fixed="item.fixed"
        :width="item.width"
        :formatter='item.formatter'
        :class-name="item.prop === 'time' ? 'time': ''"
      >
      </el-table-column>
      <el-table-column
        v-if="item.prop === 'customerNumber'"
        :key="item.id"
        :resizable="true"
        :show-overflow-tooltip="true"
        :prop="item.prop"
        :label="item.label"
        :fixed="item.fixed"
        :width="item.width"
        :formatter='item.formatter'
    >
      <template slot-scope="scope">
        <span :key="item.prop">{{ scope.row.customerNumber | getHideTel }}</span>
      </template>
    </el-table-column>
   </template>
    <el-table-column v-if="tableOperate && tableOperate.length " label="操作" fixed='right'>
      <template slot-scope="scope">
        <el-popover
          placement="bottom"
          popper-class='mwupopvoer'
          v-if="scope.row.agentNumber !== $store.state.common.session.user.agentNumber"
          trigger="click">
          <div>
                <el-menu
                  default-active="2"
                  class="el-menu-vertical-demo"
                  :collapse='true'
                  active-text-color='#303133'
                 >
                  <el-menu-item v-if='menuShow(scope.row.statusNumber) && tableOperate.includes("listen") && callType!=="listen" && getStatus' v-functions="['call_monitor_agent_listen']" @click="listen(scope.row.agentNumber)" index="1">
                    监听
                  </el-menu-item>
                  <el-menu-item v-if='menuShow(scope.row.statusNumber) && tableOperate.includes("listen") && callType==="listen" ' v-functions="['call_monitor_agent_listen']" @click="handUpClick(scope.row.agentNumber)" index="1">
                    取消监听
                  </el-menu-item>
                  <el-menu-item v-if='menuShow(scope.row.statusNumber) && tableOperate.includes("whisper") && callType!=="whisper" && getStatus'  v-functions="['call_monitor_agent_whisper']" index="2" @click="whisper(scope.row.agentNumber)">
                    耳语
                  </el-menu-item>
                  <el-menu-item v-if='menuShow(scope.row.statusNumber) && tableOperate.includes("whisper") && callType==="whisper"' v-functions="['call_monitor_agent_whisper']" @click="handUpClick(scope.row.agentNumber)" index="1">
                    取消耳语
                  </el-menu-item>
                  <el-menu-item @click="breakin(scope.row.agentNumber)" v-if='menuShow(scope.row.statusNumber) && tableOperate.includes("breakin") && getBreakInStatus && $store.state.cti.currentStatusObj.statusNumber !== "14" && $store.state.cti.currentStatusObj.statusNumber !== "15" && scope.row.statusNumber !== "14" && scope.row.statusNumber !== "15"' v-functions="['call_monitor_agent_breakin']" index="3">
                    强插
                  </el-menu-item>
                  <el-menu-item @click="hangup(scope.row.agentNumber)"  v-if='menuShow(scope.row.statusNumber) && tableOperate.includes("hangup") && otherStatus' v-functions="['call_monitor_agent_hangup']" index="4">
                    强拆
                  </el-menu-item>
                  <el-menu-item @click="loot(scope.row.agentNumber, scope.row)" v-if='menuShow(scope.row.statusNumber, scope.row) && tableOperate.includes("loot") && otherStatus && !type' v-functions="['call_monitor_agent_loot']" index="5">
                    抢接
                  </el-menu-item>
                  <el-menu-item @click="loot(scope.row.agentNumber, scope.row)" v-if='menuShow(scope.row.statusNumber, scope.row) && tableOperate.includes("loot") && otherStatus && type === "queue"' v-functions="['call_monitor_queue_loot']" index="5">
                    抢接
                  </el-menu-item>
                  <el-menu-item @click="loot(scope.row.agentNumber, scope.row)" v-if='menuShow(scope.row.statusNumber, scope.row) && tableOperate.includes("loot") && otherStatus && type === "trunkNumber"' v-functions="['call_monitor_trunk_number_loot']" index="5">
                    抢接
                  </el-menu-item>
                  <el-submenu  v-show="!scope.row.login && tableOperate.includes('signin')" v-functions="['call_monitor_agent_signin']" index="6">
                    <template slot="title">
                      签入<i class="el-icon-arrow-right myicon"></i>
                    </template>
                    <el-menu-item @click="loginIn(scope.row.agentNumber, 'PSTN', scope.row)" index="PSTN">手机</el-menu-item>
                    <el-menu-item index="SIP" @click="loginIn(scope.row.agentNumber, 'SIP')">sip话机</el-menu-item>
                  </el-submenu>
                  <el-menu-item @click="signout(scope.row.agentNumber);clg(scope.row)" v-if="scope.row.login && tableOperate.includes('signout')" v-functions="['call_monitor_agent_signout']" index="5">
                    签出
                  </el-menu-item>
                  <el-submenu v-if="change(scope.row.statusNumber, scope.row.login, scope.row.superUniqueId) && tableOperate.includes('status')  && scope.row.statusNumber != '8' && scope.row.loginType !== 'ANSWEROFFLINE' && scope.row.statusNumber !=='14' && scope.row.statusNumber !=='15'" v-functions="['call_monitor_agent_change_status']" index="7">
                    <template slot="title">
                      状态切换<i class="el-icon-arrow-right myicon"></i>
                    </template>
                    <el-menu-item @click="tochange(scope.row.agentNumber, item.number)" v-for="(item, index) in agentState.filter(i=>i.number !== scope.row.statusNumber)" :index='item.number' :key="index + 'li'">{{item.name}}</el-menu-item>
                  </el-submenu>
                </el-menu>
           <!-- <el-button v-for="(item, index) in tableOperate" @click="item.function(scope.row)" :key="index + 'button'"  type="text">{{item.name}}</el-button> -->
          </div>
          <span slot="reference" class="el-dropdown-link">
            操作<i class="el-icon-arrow-down el-icon--right"></i>
          </span>
        </el-popover>
      </template>
    </el-table-column>
  </el-table>
<el-dialog title="请选择SIP号" :visible.sync="visible">
  <span class="drop-span">SIP号:</span>
  <m7Select
    size="mini"
    style="width: 130px"
    v-model="sipNumber"
    placeholder="请选择"
    :options="sipArr"
    :defaultProps="{ label: 'number', value: 'number' }"
    ></m7Select>
  <span slot="footer" class="dialog-footer">
    <el-button @click="visible = false">取 消</el-button>
    <el-button type="primary" @click="bindSIP">确 定</el-button>
  </span>
</el-dialog>
</div>
</template>

<script lang='ts'>
import { Component, Vue, Prop } from 'vue-property-decorator'
import { MonitoringModule } from '@/store/modules/monitoring'
import { commonAction, checkHideTel } from '@/utils/common'
@Component({
  name: 'Table',
  filters: {
    getHideTel (customerNumber) {
      return checkHideTel(customerNumber)
    }
  }
})
export default class Table extends Vue {
  @Prop({ default: () => [{}] }) private tableHeaders !: any
  @Prop({ default: () => [{}] }) private tableData !: any
  @Prop({ default: () => [] }) private tableOperate !: any
  @Prop({ default: () => [] }) private agentState !: any
  @Prop({ default: () => '' }) private type !: any
  private rowHeight = 55
  private height = 500
  private $message: any
  private $prompt: any
  private $store: any
  private $confirm: any
  private visible = false
  private sipNumber = ''
  private agentNumber = ''
  get nowData () {
    return Object.freeze(this.tableData)
  }

  get headers () {
    let headers
    const statusObj = this.$store.state.cti.currentStatusObj
    if (this.tableHeaders.length) {
      headers = this.tableHeaders.filter(item => item.show)
    }
    return headers || [{}]
  }

  private changeLoginType () {
    console.log('changeLoginType')
  }

  private handleSelect () {
    console.log('handleSelect')
  }

  private toclick (item) {
    console.log(item)
  }

  private listen (id) {
    MonitoringModule.listen(id).then(res => {
      if (res.success) {
        this.nowId = id
        console.log(id, 123)
      }
    })
  }

  private whisper (id) {
    MonitoringModule.whisper(id).then(res => {
      console.log(res)
    })
  }

  private menuShow (statusNumber, row) {
    if (statusNumber === '4') {
      return true
    }
    if (row?.queueStartTime) {
      console.log(row)
      return true
    }
    return false
  }

  private change (number, login, superId) {
    if (superId) {
      return false
    }
    if (login && number !== '8') {
      return true
    } else {
      return false
    }
  }

  private nowId = ''

  private tochange (id, status) {
    MonitoringModule.status({ id, status }).then(res => {
      console.log(res)
    })
  }

  private sipArr = []

  private loginIn (id, status, row) {
    MonitoringModule.signin({ id, status }).then(res => {
      if (res.success) {
        this.$message.sucess('成功')
      } else {
        if (res.message === '座席未绑定手机号') {
          this.$prompt('座席未绑定手机号, 请输入', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            inputPattern: /^\d+$/,
            inputErrorMessage: '手机格式不正确'
          }).then(({ value }) => {
            console.log(row.agentId)
            const actionData = { url: '/call/action/monitor/agent/bind/mobile', method: 'POST', data: { mobile: value, agentNumber: id } }
            commonAction(actionData).then(resq => {
              if (resq.success) {
                this.$message.success('绑定成功')
              }
            })
          })
        }
        if (res.message === '座席未绑定SIP号') {
          const actionData = { url: '/call/action/general/query', method: 'POST', data: { types: ['availableSipNumberList'] } }
          commonAction(actionData).then(r => {
            if (r && r.success) {
              const resList = r.availableSipNumberList || []
              this.sipArr = resList
              this.visible = true
              this.agentNumber = id
            }
          })
        }
      }
    })
  }

  private bindSIP () {
    if (!this.sipNumber) {
      this.$message.error('请选择sip号')
      return
    }
    const data = { agentNumber: this.agentNumber, sipNumber: this.sipNumber }
    commonAction({ url: '/call/action/monitor/agent/bind/sip', method: 'post', data }).then(res => {
      if (res.success) {
        this.$message.success('绑定成功')
        this.visible = false
      }
    })
  }

  private loot (id, row) {
    if (this.type === 'queue') {
      MonitoringModule.queueLoot(row.callId).then(res => {
        console.log(res)
      })
    } else if (this.type === 'trunkNumber') {
      MonitoringModule.trunkNumberLoot(row.callId).then(res => {
        console.log(res)
      })
    } else {
      MonitoringModule.loot(id).then(res => {
        console.log(res)
      })
    }
  }

  private hangup (id) {
    MonitoringModule.hangup(id).then(res => {
      console.log(res)
    })
  }

  // private pickup (id) {
  //   MonitoringModule.pickup(id).then(res => {
  //     console.log(res)
  //   })
  // }

  private breakin (id) {
    MonitoringModule.breakin(id).then(res => {
      if (res.success) {
        this.nowId = id
        console.log(id, 123)
      }
    })
  }

  private signout (id) {
    this.$confirm('签出操作会让座席退出登录，是否签出？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      MonitoringModule.signout(id).then(res => {
        if (res.success) {
          this.$message.success('成功')
        }
      })
    }).catch(() => {
      //
    });
  }

  private updateSIP () {
    //
  }

  get callType () {
    const statusObj = this.$store.state.cti.currentStatusObj
    if (statusObj.callEvent !== 'hangup') {
      return statusObj.callType
    } else {
      return null
    }
  }

  get getStatus () {
    // 0=> 空闲 1=> 忙碌 2=> 呼叫中 3=>振铃 4 =>通话中 5=> 整理  6=> 保持 7=> 静音 8=> 未连接 9=> 失效 10=> 咨询 11=> 三方  12 => 咨询（被咨询方） 13=>三方(被咨询方) 14=> 监听 15=> 耳语 100+ => 自定义状态
    const status = this.$store.state.cti.currentStatusObj.statusNumber || ''
    if (status === '1' || status.length > 2) {
      return true
    } else {
      return false
    }
  }

  get otherStatus () {
    const status = this.$store.state.cti.currentStatusObj.statusNumber || ''
    if (status === '0' || status === '1' || status.length > 2) {
      return true
    } else {
      return false
    }
  }

  get getBreakInStatus () {
    console.log(this.$store.state.cti.currentStatusObj.statusNumber, 2333)
    const status = this.$store.state.cti.currentStatusObj.statusNumber || ''
    if (status === '1' || status.length > 2 || status === '14') {
      return true
    } else {
      return false
    }
  }

  private handUpClick () { // 真挂机
    const actionData = { url: '/call/action/biz/hangup', method: 'POST', data: { superUniqueId: this.$store.state.cti.superUniqueId } }
    commonAction(actionData).then(res => {
      if (res.success) {
        const statusObj = this.$store.state.cti.currentStatusObj
        console.log(statusObj, 123)
      }
    })
  }
}
</script>
<style lang='stylus' scoped>
/deep/.monitorTableHeader
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 600;
  color: #303753;
  .cell.umy-table-beyond
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
/deep/.monitorTable
  font-size: 12px;
  font-family: PingFang SC;
  font-weight: 400;
  color: #686E84;
.el-dropdown-link {
  cursor: pointer;
  color: #409EFF;
}
.el-icon-arrow-down {
  font-size: 12px;
}

/deep/.el-menu
  border-right none
/deep/.myicon
  font-size 12px
/deep/.el-menu-vertical-demo
  .el-menu-item
    height: 24px;
    line-height: 24px;
  .el-submenu .el-submenu__title
    display: flex;
    justify-content: center;
    align-items: center;
    height: 24px;
    line-height: 24px;

</style>
<style >
.mwupopvoer {
  min-width: unset!important
}
.mwupopvoer .el-menu--collapse {
  width: unset;
  text-align: center;
}
.el-menu--vertical .el-menu-item {
  height: 24px;
  line-height: 24px;
  margin: 5px 10px
}
</style>
